<template>
  <div class="hello">
    <ImageTop></ImageTop>


    <div class="container-fluid mt-3" >

      <div class="card mt-2">
        <div class="card-body">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="PhoneNumber">手机号：</span>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" v-model="username">
          </div>


          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="Password">密&emsp;码：</span>
            </div>
            <input type="password" class="form-control" placeholder="Password" aria-label="Username" aria-describedby="basic-addon1" v-model="password">
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="code">验证码：</span>
            </div>
            <input type="text" class="form-control" placeholder="Password" aria-label="Username" aria-describedby="basic-addon1" v-model="captchaCode">
          </div>

          <div class="form-inline mb-3">
            <img class="form-control col-7 p-0" style="height: 45px" v-bind:src="captchaImg">
            <button class="btn btn-light col-4 offset-1" style="height: 45px" v-on:click="getCaptchaBase64">换一个</button>
          </div>

          <div class="mb-3">
            <button class="btn btn-primary col-12" v-on:click="doLogin"><i class=""></i> 登录</button>
            <button class="btn btn-link mt-2" @click="$router.push('/UserRegister')">没有会员账号？立即注册>>></button>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import service from "@/utils/axios";

  export default {
    name: 'HelloWorld',
    data () {
      return {
        captchaImg: "",
        captchaCode: "",
        captchaId: "",
        username: "",
        password: "",
        currentUser: []
      }
    },
    methods: {
      getCaptchaBase64(){
        axios.get("http://localhost:8081/captcha/generateCaptcha").then(data => {
          this.captchaImg = data.data.data.captchaImg;
          this.captchaId = data.data.data.captchaId;
        });
      },
      doLogin(){
        service.post("/login",{
          "username":this.username,
          "password":this.password,
          "captchaId":this.captchaId,
          "captchaCode":this.captchaCode,
        }).then(data => {
          localStorage.setItem("token", data.data.data);
          this.$router.push("HomePage")
        });
      }
    },
    created() {
      this.getCaptchaBase64();
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container-fluid{
  background-color: #F8F9F9;
}
</style>
